let questionApp = new Vue({
    el: "#questionApp",
    data: {
        question: {}
    },
    methods: {
        loadQuestion: function () {
            // question/detail_teacher.html?149
            // 获得url地址栏上?之后的内容
            let qid = location.search;
            // location.search可以获得地址栏中?之后的内容,具体的获取规则:
            // 如果url中没有? qid=null
            // 如果url中有?但是?之后没有任何内容 qid=null
            // 如果url中有?而且?之后有人内容    qid=?[之后的内容]
            // question/detail_teacher.html?149  ->  ?149
            if (!qid) {
                // 如果qid不存在,或理解qid为null
                alert("请指定问题id");
                return;
            }

            // qid  ?149    ->   149
            qid = qid.substring(1);
            axios({
                url: "/v1/questions/" + qid,
                method: "get"
            }).then(function (response) {
                questionApp.question = response.data;
                addDuration(response.data);
            })
        }
    },
    created: function () {
        this.loadQuestion();
    }
})

let postAnswerApp = new Vue({
    el: "#postAnswerApp",
    data: {},
    methods: {
        postAnswer: function () {
            // 获得?之后的id
            let qid = location.search;
            if (!qid) {
                return;
            }
            // qid不空,去掉开头的?
            qid = qid.substring(1);
            // jQuery代码获得的Summernote中的内容
            let content = $("#summernote").val();
            // 创建表单对象
            let form = new FormData();
            form.append("questionId", qid);
            form.append("content", content);
            axios({
                url: "/v1/answers",
                method: "post",
                data: form
            }).then(function (response) {
                console.log(response.data);
                let answer = response.data;
                answer.duration = "刚刚";
                answersApp.answers.push(answer);
                // 利用富文本编辑器提供的方法,清空其中内容
                $("#summernote").summernote("reset");
            })

        }
    }
})

let answersApp = new Vue({
    el: "#answersApp",
    data: {
        answers: []
    },
    methods: {
        loadAnswers: function () {
            let qid = location.search;
            if (!qid) {
                return;
            }
            qid = qid.substring(1);
            axios({
                url: "/v1/answers/question/" + qid,
                method: "get"
            }).then(function (response) {
                answersApp.answers = response.data;
                answersApp.updateDuration();
            })
        },
        updateDuration: function () {
            let answers = this.answers;
            for (let i = 0; i < answers.length; i++) {
                addDuration(answers[i])
            }
        },
        postComment: function (answerId) {
            //  获得多行文本框中输入的内容
            let textarea = $("#addComment" + answerId + " textarea")
            let content = textarea.val();
            // 创建表单
            let form = new FormData();
            form.append("answerId", answerId);
            form.append("content", content);
            axios({
                url: "/v1/comments",
                method: "post",
                data: form
            }).then(function (response) {
                // 当前新增成功的评论
                let comment = response.data;
                // 所有回答
                let answers = answersApp.answers;
                // 遍历所有回答
                for (let i = 0; i < answers.length; i++) {
                    // 判断当前回答的id是否和新增评论的answerId一致
                    if (answers[i].id == answerId) {
                        // 如果一致表示新增的评论就是评论当前回答的
                        // 所以添加到当前回答的评论列表中
                        answers[i].comments.push(comment);
                        // 清空多行文本框的内容
                        textarea.val("");
                        break;
                    }
                }
            })
        },
        removeComment: function (commentId, index, comments) {
            axios({
                url: "/v1/comments/" + commentId + "/delete",
                method: "get"
            }).then(function (response) {
                console.log(response.data);
                if (response.data == "ok") {
                    comments.splice(index, 1);
                } else {
                    alert(response.data);
                }
            })
        },
        updateComment: function (commentId, index, answer) {
            //  获得修改评论多行文本框的对象和内容
            let textarea = $("#editComment" + commentId + " textarea");
            let content = textarea.val();
            if (!content) {
                // 如果没有内容,终止方法
                return;
            }
            // 创建表单封装CommentVO对象的数据
            let form = new FormData();
            form.append("answerId", answer.id);
            form.append("content", content);
            axios({
                url: "/v1/comments/" + commentId + "/update",
                method: "post",
                data: form
            }).then(function (response) {
                console.log("使用typeof判断返回值类型:" + typeof (response.data))
                if (typeof (response.data) == "object") {
                    // response.data是修改完成的对象
                    let comment = response.data;
                    // 修改操作不会影响元素的数量
                    // 数组元素数量不变化时,Vue不会自动更新页面上的内容
                    // Vue.set([修改哪个数组],[要修改元素的下标],[修改成什么])
                    Vue.set(answer.comments, index, comment);
                    // 修改成功后,编辑输入框自动收缩
                    $("#editComment" + commentId).collapse("hide");
                } else {
                    alert(response.data);
                }
            })
        },
        answerSolved: function (answerId) {
            axios({
                url: "/v1/answers/" + answerId + "/solved",
                method: "get"
            }).then(function (response) {
                console.log(response.data);
            })
        }
    },
    created: function () {
        this.loadAnswers();
    }
})





